<template>
  <div class="home-container">
    <scroller :pulldown-config="pulldownConfig" :pullup-config="pullupConfig" height="100%" lock-x scrollbar-y
              use-pullup use-pulldown
              @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" :pullup-status.sync="pullupStatus"
              ref="scroller">
      <div v-show="showContent" style="width: 100%;height: 100%;overflow: hidden">
        <carousel :imgs="carouselImg"></carousel>
        <slideadv :list="notices"></slideadv>
        <div class="line"></div>
        <div class="product-menu">
          <slide-item slot="table-item" v-for="(item,index) in menuData" :menu-obj="item" :key="'slide'+index"
                      @click-product-item="clickProductMenu(item.classId,item.closetime,item.classImage)"></slide-item>
        </div>
        <div class="line"></div>
        <!--<signmenu :activtys="detailActivitys"></signmenu>-->
        <div class="h2"></div>
        <sticky>
          <tab style="font-size: 2.5rem" active-color="#FFA500" bar-active-color="bar-active-color" animate>
            <tab-item selected @on-item-click="clickSwitchItem(0)">本周热卖</tab-item>
            <tab-item @on-item-click="clickSwitchItem(1)">人气新品</tab-item>
          </tab>
        </sticky>
        <div class="product-box">
          <div v-if="productState == 'hot'" class="product-list">
            <product-item @show-popup="showPopup" @del="delCart" @add="addCart" :product-no="index" :product="item"
                          v-for="(item,index) in productHot" :key="item.id">
            </product-item>
          </div>
          <div v-if="productState == 'new'" class="product-list">
            <product-item @show-popup="showPopup" @del="delCart" @add="addCart" :product-no="index" :product="item"
                          v-for="(item,index) in productNew" :key="item.id"></product-item>
          </div>
        </div>
      </div>
    </scroller>
    <div @click="toCart" class="cart-menu">
      <suspension-cart :num="cartNum" :totalprice="cartTotalPrice"></suspension-cart>
    </div>
    <div @click="hidePop" v-show="showPop" class="pop-container">
      <div class="pop-bg"></div>
      <img class="bigImg" :src="bigImage" alt="">
    </div>
  </div>
</template>
<script>
  import {MyGetWithToast, MyGet} from './../../commons/js/MyRequest'
  import {setItem} from './../../commons/js/LocalStorageUtil'
  import {getCartStorage, addCartStorage, countCartNum, getTotalPrice, delCart} from './../../commons/js/Cart'
  import {set_hotel} from './../../vuex/actions.js'
  import {hotel} from './../../vuex/getters.js'
  import { mapState, mapGetters, mapActions } from 'vuex'
  import carousel from './../components/carousel.vue'
  import Scroller from './../../components/scroller/index.vue'
  import slideadv from './../components/menu/slide-adv.vue'
  import TableMenu from './../components/menu/table-menu.vue'
  import SlideItem from './../components/menu/slide-item.vue'
  import signmenu from './../components/menu/sign-menu.vue'
  import sticky from './../../components/sticky/index.vue'
  import Tab from './../../components/tab/tab.vue'
  import TabItem from './../../components/tab/tab-item.vue'
  import ProductItem from './../components/product/product-item.vue'
  import SuspensionCart from './../components/menu/suspension-cart.vue'

  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  export default{
    data(){
      return {
        carouselImg: [],
        pullupEnabled: true,
        pullupStatus: 'default',
        pageNo: 0,
        pageSize: 10,
        pulldownConfig: {
          content: '下拉刷新',
          downContent: '松开进行加载',
          upContent: '下拉刷新',
          loadingContent: '加载中...',
          height: 30
        },
        pullupConfig: {
          content: '上拉加载更多',
          downContent: '松开进行加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...'
        },
        notices: [],
        menuData: [],
        detailActivitys: [],
        productNew: [],
        productHot: [],
        productState: "hot",
        currentDate: '',
        cartNum: 0,
        cartTotalPrice: 0,
        cityId: 1,
        showPop:false,
        showContent:false,
        bigImage: ''
      }
    },
    created(){
    },
    computed:{
      ...mapGetters({  
                hotel: 'getHotel',
                userId:'getUserId' ,
                isLoading: 'getLoadingState',
                openid:'getOpenid'
            }),  
    },
    mounted(){
      if(this.hotel == 'no'){
        var hotelNo = this.$route.query.hotelNo;
        if(hotelNo){
          this.hotelNo = hotelNo;
        }
        // this.hotelNo = '036';
        this.getHotel();
      }else{
        this.cityId = this.hotel.hotel.cityId;
        this.init();
        this.initCart();
      }
      if(this.userId == 'no') {
        var openId = this.$route.query.openid;
        if(openId){
          this.updateopenId = this.updateopenId(openId);
        }
        this.getUerInfo();
      }    
      this.getActiveDay();
    },
    components: {
      carousel,
      Scroller,
      slideadv,
      TableMenu,
      SlideItem,
      signmenu,
      sticky,
      TabItem,
      Tab,
      ProductItem,
      SuspensionCart
    },
    methods: {
      ...mapActions({  
              updateHotel: 'updateHotel',   
              updateuserId:'updateuserId',
              updateLoading:'updateLoadingStatus',
              updateopenId:'updateopenId'
          }),  
      clickSwitchItem(index){
        if (index == 0) {
          this.productState = "hot";
        } else {
          this.productState = "new";
        }
        this.$refs.scroller.reset()
        this.c_index = index;
      },
      clickProductMenu(classId, closeTime, bigImg){
        this.$router.push({name: 'ProductList', query: {classId: classId, closetime: closeTime, classImage: bigImg}});
      },
      setTopBanner(data){
        var bannerData = new Array();
        if (!data || !data.length) {
          this.carouselImg = bannerData;
          return;
        }
        for (var i = 0; i < data.length; i++) {
          var obj = {
            url: data[i].linkUrl,  //这里填写图片点击的链接
            img: data[i].picture
          }
          bannerData[bannerData.length] = obj;
        }
        this.carouselImg = bannerData;
      },
      setNotice(data, noticeTime){
        var n = new Array();
        for (var i = 0; i < data.length; i++) {
          var d = data[i].mobile
            + "点了"
            + data[i].productName
            + "  "
            + data[i].productCount + "份";
          n[n.length] = d;
        }
        if (n.length <= 0) {
          for (var i = 0; i < noticeTime.length; i++) {
            var d = noticeTime[i].title;
            n[n.length] = d;
          }
        }
        this.notices = n;
      },
      setDetailActivty(data){
        this.detailActivitys = data
        setItem("detailActivitys", data)
      },
      setProductMenu(data){
        this.menuData = data;
      },
      setProductHot(data){
        var s = "http://static.52letsgo.cn/";
        var currentDate = this.currentDate;
        var carts = getCartStorage();
        for (var i = 0; i < data.length; i++) {
          if (i == 0) {
            data[i].type = "product-cell-1";
          } else if (i == 1) {
            data[i].type = "product-cell-2";
          } else {
            data[i].type = "product-cell-3";
          }
          data[i].productNo = (i + 1);
          data[i].bigImage = s + data[i].bigImage;
          data[i].horImage = s + data[i].horImage;
          data[i].image = s + data[i].image;
          var num = 0;
          for (var j = 0; j < carts.length; j++) {
            if (carts[j].productId == data[i].id && carts[j].date == currentDate) {
              num = carts[j].num;
              break;
            }
          }
          data[i].cartNum = num;
        }
        this.productHot = data;
        this.$nextTick(() => {
          this.$refs.scroller.reset()
        })
      },
      setProductNew(data){
        var s = "http://static.52letsgo.cn/";
        var currentDate = this.currentDate;
        var carts = getCartStorage();
        for (var i = 0; i < data.length; i++) {
          data[i].type = "product-cell-3";
          data[i].productNo = 0;
          data[i].bigImage = s + data[i].bigImage;
          data[i].horImage = s + data[i].horImage;
          data[i].image = s + data[i].image;
          var num = 0;
          for (var j = 0; j < carts.length; j++) {
            if (carts[j].productId == data[i].id && carts[j].date == currentDate) {
              num = carts[j].num;
              break;
            }
          }
          data[i].cartNum = num;
        }
        this.productNew = data;
        this.$nextTick(() => {
          this.$refs.scroller.reset()
        })
      },
      loadMore(){
        if (this.productState == 'hot') {
          this.pageNo++;
          var b = this.pageNo * this.pageSize + 1;
          var data = {
            action: "findAllHotProduct",
            cityId: this.cityId,
            begin: b,
            end: this.pageSize
          };
          MyGet("HotProduct", this, function (result, that) {
            var currentDate = that.currentDate;
            var carts = getCartStorage();
            var s = "http://static.52letsgo.cn/";
            for (var i = 0; i < result.data.length; i++) {
              result.data[i].type = "product-cell-3";
              result.data[i].productNo = (b + i);
              result.data[i].bigImage = s + result.data[i].bigImage;
              result.data[i].horImage = s + result.data[i].horImage;
              result.data[i].image = s + result.data[i].image;
              var num = 0;
              for (var j = 0; j < carts.length; j++) {
                if (carts[j].productId == result.data[i].id && carts[j].date == currentDate) {
                  num = carts[j].num;
                  break;
                }
              }
              result.data[i].cartNum = num;
              that.productHot.push(result.data[i]);
              //that.productHot[that.productHot.length] = result.data[i];
            }
            that.$refs.scroller.donePullup();

            this.$nextTick(() => {
              if (result.data.length == 0) {
                that.$refs.scroller.disablePullup()
              }
            })
          }, data);
        } else {

          this.$refs.scroller.disablePullup()
          this.$refs.scroller.reset()
        }
      },
      refresh(){
        this.pageNo = 0;
        this.$refs.scroller.enablePullup()
        this.init();
      },
      showPopup(index, url){
        this.showPop = true;
        this.bigImage = url;
      },
      delCart(index){
        var date = this.currentDate;
        var id = this.productHot[index].id;
        if (this.productState == "hot") {
          var num = this.productHot[index].cartNum;
          num--;
          this.productHot[index].cartNum = num;
        } else if (this.productState == "new") {
          var num = this.productNew[index].cartNum;
          num--;
          this.productNew[index].cartNum = num;
          id = this.productNew[index].id;
        }
        delCart(id, date);
        this.initCart();
      },
      addCart(index){
        if (this.productState == "hot") {
          var num = this.productHot[index].cartNum;
          num++;
          this.productHot[index].cartNum = num;
        } else if (this.productState == "new") {
          var num = this.productNew[index].cartNum;
          num++;
          this.productNew[index].cartNum = num;
        }
        var date = this.currentDate;
        var day = this.currentDay;
        addCartStorage(this.productHot[index], date, day);
        this.initCart();
      },
      initCart(){
        this.cartNum = countCartNum();
        this.cartTotalPrice = getTotalPrice();
      },
      getActiveDay(){
        var data = {
          action: "weekday"
        };
        MyGet("ActiveDay", this, function (result, that) {
          var data = result.data;
          for (var i = 0; i < data.length; i++) {
            if (data[i].state == 2) {
              that.currentDate = data[i].wdate;
              that.currentDay = data[i].wday;
            }
          }
        }, data);
      },
      init(){
        var data = {
          action: "home_info",
          cityId: this.cityId
        };
        MyGetWithToast("Home", this, function (result, that) {
          that.productHot = new Array();
          that.setTopBanner(result.data.centerAd);
          that.setNotice(result.data.notice, result.data.noticeTime);
          that.setDetailActivty(result.data.dailyActivity);
          that.setProductMenu(result.data.productClasses);
          that.setProductHot(result.data.hotProduct);
          that.setProductNew(result.data.newProduct);
          that.$refs.scroller.donePulldown()
          that.showContent = true;
        }, data);
      },
      toCart(){
        this.$router.push("/cart");
      },
      hidePop(){
        this.showPop = false;
      },
      getHotel(){
        var data = {
          action:"getHotel",
          hotelNo:this.hotelNo
        }
        MyGet("Hotel",this,function(resule,that){
          that.updateHotel(resule.data);
          that.cityId = resule.data.cityId;
          that.init();
          that.initCart();
        },data);
      },
      getUerInfo(){
         var data = {
          action:"registerTourists",
          mobile:this.openid,
          nickname:"酒店游客"
        }
        MyGet("Hotel",this,function(resule,that){
          that.updateuserId(resule.data);
        },data);
      }
    },
    created(){
    
    }
  }
</script>
<style lang="less">
  @import "home.less";
</style>
